<template>
 <view class="background">
	<view class="personal">
		<image src="../../../static/images2/wd/tx.png" mode=""  class="img"></image> 
		<view class="right">
			<view class="username">{{username}}</view>
			<view class="mobile">{{mobile}}</view>
		</view>
	</view> 
	
	<view class="person-bank">
		<view class="person-bank-bg">
			<image src="../../../static/images2/wd/bg-zhye.png" mode=""></image>
		</view>
		<view class="person-bank-content">
			<view class="person-bank-left">
				<view class="person-bank-title">账户余额（元）</view>
				<view class="person-bank-amount">0.00</view>
			</view>
			<view class="person-bank-right">
				<view class="person-bank-btn plain" @click="recharge">充值</view>
				<view class="person-bank-btn" @click="recharge">提现</view>
			</view>
		</view>
	</view>
	
	<view class="SuperFine_loanee public">
		<!-- 
		<view class="card" >
			<view class="text">
				<view>账户余额（元）</view>
				<view class="balance">0.00</view>
			</view>
			<view class="button">
				<view class="recharge" @click="recharge">充值</view>
				<view class="withdrawal" @click="recharge">提现</view>
			</view>
		</view>
		 -->
		<view class="card" @click="bankCard ">
			<image src="../../../static/images2/wd/icon-bank.png" mode=""  class="cardImg"></image>
			<view class="cardTitle">
				银行卡管理
		</view>
	</view>
	<view class="show"></view>
	<view class="card" @click="changePassword">
			<image src="../../../static/images2/wd/icon-mmgl.png" mode=""  class="cardImg"></image>
			<view class="cardTitle">
				修改登录密码
			</view>
	</view>
	<view class="show"></view>
	<view class="card" @click="changeTransaction">
			<image src="../../../static/images2/wd/icon-rmb.png" mode=""  class="cardImg"></image>
			<view class="cardTitle">
				修改交易密码
			</view>
	</view>
	<view class="show"></view>
	<view class="card" @click="helpCenter">
			<image src="../../../static/images2/wd/icon-bz.png" mode=""  class="cardImg"></image>
			<view class="cardTitle">
				帮助中心
			</view>
	</view>
	<view class="show"></view>
	<view class="card" @click="protection">
			<image src="../../../static/images2/wd/icon-ss.png" mode=""  class="cardImg"></image>
			<view class="cardTitle">
				诉讼保障
			</view>
	</view>
	<view class="show"></view>
	<!--
	<view class="card" @click="switchAccount">
		<image src="../../../static/images/switch.png" mode=""  class="cardImg"></image>
		<view class="cardTitle">
			退出登录
		</view>	
	</view>
	-->
	<view class="logout-btn" @click="switchAccount">
		退出登录
	</view>
</view>
<tabBar></tabBar>
 <jpPwd ref="jpPwds" tite="身份验证" height='58' @inputPwd="inputPwd" :contents="title" :flag="flag"  @completed="completed"  ></jpPwd>
  <u-toast ref="uToast" />
 </view>
</template>

<script>
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	import date from '@/utils/date.js'
	import {mapState,mapMutations,mapActions} from 'vuex'
 export default {
   data () {
     return {
       phone:'17311701400',
	   mobile:'',
	   username:'',
	    flag:false,
		title:'请输入旧的交易密码',
     }
   },
   components: {
		jpPwd
   },
   methods: {
	   ...mapMutations({
	    changeOldPassword:'PERSONAL/CHANGE_OLD_PASSWORD',//旧密码
	    changeNewPassword:'PERSONAL/CHANGE_NEW_PASSWORD',//新密码
	   }),
	   ...mapActions({
	    changeConfirmPassword:'PERSONAL/CHANGE_CONFIRM_PASSWORD',//确认密码提交
	   }),
	   switchAccount(){
		   uni.showModal({
		       title: '提示',
		       content: '是否要切换账号?',
		       success: function (res) {
		           if (res.confirm) {
		             uni.redirectTo({
		             	url: '/pages/loanee/login/index'
		             }); 
					  uni.removeStorageSync('token');
					  uni.removeStorageSync('group_id');
		           } 
		       }
		   });
	   },
	   bankCard(){
		 uni.navigateTo({
		     url: '/pages/loanee/personal/management'
		 });   
	   },
	   changePassword(){
		uni.navigateTo({
		    url: '/pages/loanee/personal/steganogram'
		});   
	   },
	      //帮助中心
	   helpCenter(){
     uni.navigateTo({
		    url: '/pages/loanee/personal/helpCenter'
		});  
	   },
	   //诉讼保障
	   protection(){
  uni.navigateTo({
		    url: '/pages/loanee/personal/protection'
		});  
	   },
	   changeTransaction(){
		   this.$refs.jpPwds.toOpen()
		   this.flag=false
		 // uni.navigateTo({
		 //     url: '/pages/loanee/personal/tradersPassword'
		 // });  
	   },
	   //修改交易密码
	   completed(e){
		if(this.title=='请输入旧的交易密码'){
		  this.changeOldPassword(e)
		  this.title="请输入新的交易密码"
		this.$refs.jpPwds.backs()
		 }else if(this.title=='请输入新的交易密码'){
		   this.changeNewPassword(e)
		   this.title="请再次输入新的交易密码"
		   this.$refs.jpPwds.backs()
		 }else{
		      this.$refs.jpPwds.backs()
		       this.title="请输入旧的交易密码" 
		       if(this.transaction.new_pwd!=e){
				   this.flag=true
		        this.$refs.uToast.show({
						title: '两次密码不一致',
					})
		            return
		       }
		       this.changeConfirmPassword(e).then(res=>{
				 if(res){
					 uni.showToast({
					     title: '修改成功',
					 					  icon:'success',
					     duration: 2000
					 }); 
					   this.$refs.jpPwds.toCancel()
				 }
			   }) 
		 }   
	   },
	   
	   inputPwd(){
		    this.flag=false  
	   },
		   //提示
	   recharge(){
		   uni.showToast({
		       title: '支付功能升级中!',
		       duration: 2000,
			   icon:'error'
		   });
	   }
   },
   mounted() {
   
	 if( uni.getStorageSync('userinfo')){
		this.username= uni.getStorageSync('userinfo').username 
		this.phone= uni.getStorageSync('userinfo').mobile 
	 }
	   this.mobile=date.phoneNumFilter(this.phone)
   },
   watch: {

   },
   computed: {
 ...mapState({
       transaction:(state)=>state.PERSONAL.transaction
   })
   }
 }
</script>

<style scoped lang='scss'>
@import "@/common/personal.scss";
</style>
<style>
page{
    background: #FAFAFA;
}
</style>